<template>
  <div class="home_child_container">
    <a-card class="search_card">
      <template #title>
        <a-input-search v-model:value="searchValue" placeholder="请输入要搜索的内容" @search="onSearch">
          <template #enterButton>
            <a-button type="primary">
              <template #icon>
                <SearchOutlined/>
              </template>
              搜索
            </a-button>
          </template>
        </a-input-search>
      </template>
      <a-tabs v-model:activeKey="activeTab" type="card">
        <a-tab-pane key="blog" tab="博客">
          <a-list class="search_result_list" item-layout="vertical" size="large" :loading="blogLoading"
                  :data-source="blogList">
            <template #renderItem="{ item }">
              <a-list-item :key="item.id">
                <blog-item :blog="item"/>
              </a-list-item>
            </template>
            <template #loadMore>
              <div class="list_load_more_div" v-if="blogList.length > 0">
                <a-button type="primary" :loading="blogLoadingMore" @click="loadMore" v-if="blogHasMore" ghost>
                  加载更多
                </a-button>
                <span v-else>已经没有啦~</span>
              </div>
            </template>
          </a-list>
        </a-tab-pane>
        <a-tab-pane key="user" tab="用户">
          <a-list class="search_result_list" item-layout="vertical" size="large" :loading="userLoading"
                  :data-source="userList">
            <template #renderItem="{ item }">
              <a-list-item :key="item.id">
                <user-info-item :user="item"/>
              </a-list-item>
            </template>
            <template #loadMore>
              <div class="list_load_more_div" v-if="userList.length > 0">
                <a-button type="primary" :loading="userLoadingMore" @click="loadMore" v-if="userHasMore" ghost>
                  加载更多
                </a-button>
                <span v-else>已经没有啦~</span>
              </div>
            </template>
          </a-list>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { useRoute } from 'vue-router'
import BlogItem from '@/components/item/BlogItem'
import UserInfoItem from '@/components/item/UserInfoItem'
import { GetSearchBlog } from '@/service/blog'
import { GetSearchUserList } from '@/service/user'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const route = useRoute()
    const state = reactive({
      activeTab: 'blog',
      searchValue: route.params.value,
      blogList: [],
      blogLoading: false,
      blogLoadingMore: false,
      blogHasMore: true,
      userList: [],
      userLoading: false,
      userLoadingMore: false,
      userHasMore: true
    })

    const methods = reactive({
      highlight: () => {
        const highlightStr = `<span class="highlight">${state.searchValue}</span>`
        const reg = new RegExp(state.searchValue, 'gi')
        state.blogList.forEach(item => {
          item.title = item.title.replaceAll(reg, highlightStr)
          item.summary = item.summary.replaceAll(reg, highlightStr)
        })
        state.userList.forEach(item => {
          item.name = item.name.replaceAll(reg, highlightStr)
        })
      },
      onSearch: async () => {
        const str = state.searchValue.toString().trim()
        if (str.trim().length === 0) {
          proxy.$message.info('请输入需要搜索的内容！')
          return
        }
        // 开启加载动画
        state.blogLoading = true
        state.userLoading = true
        // 查询博客
        state.blogList = await GetSearchBlog(str)
        if (state.blogList.length > 0 && state.blogList.length < 10) {
          state.blogHasMore = false
        }
        // 查询用户
        state.userList = await GetSearchUserList(str)
        if (state.userList.length > 0 && state.userList.length < 10) {
          state.userHasMore = false
        }
        // 设置高亮
        methods.highlight()
        // 关闭加载动画
        state.blogLoading = false
        state.userLoading = false
      },
      loadMore: async () => {
        const str = state.searchValue.toString().trim()
        if (state.activeTab === 'blog') {
          state.blogLoadingMore = true
          const moreList = await GetSearchBlog(str, state.blogList[state.blogList.length - 1].createdTime)
          if (moreList && moreList.length > 0 && moreList.length < 10) {
            state.blogHasMore = false
          }
          state.blogList = state.blogList.concat(moreList)
          state.blogLoadingMore = false
        } else {
          state.userLoadingMore = true
          const moreList = await GetSearchUserList(str, state.userList[state.userList.length - 1].createdTime)
          if (moreList && moreList.length > 0 && moreList.length < 10) {
            state.userHasMore = false
          }
          state.userList = state.userList.concat(moreList)
          state.userLoadingMore = false
        }
      }
    })

    onMounted(async () => {
      console.log(state.searchValue)
      if (state.searchValue && state.searchValue.length.toString().trim() > 0) {
        await methods.onSearch()
      } else {
        state.searchValue = ''
      }
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  },
  components: {
    BlogItem,
    UserInfoItem,
    SearchOutlined
  }
})
</script>

<style lang="less">
.search_card {
  width: 100%;

  & .highlight {
    color: #1da57a;
  }

  & .list_load_more_div {
    margin-top: 15px;
    width: 100%;
    color: #00000080;
    display: flex;
    justify-content: center;
  }
}
</style>
